<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="iconfont/iconfont.css"/>
    <title>党建地图</title>
    <style type="text/css">
		ul,li{list-style: none;margin:0;padding:0;float:left;}
		html{height:100%}
		.hgt100 {height:100%}
		.hgt90 {height:90%}
		body{height:100%;margin:0px;padding:0px;font-family:"微软雅黑";}
		.row{margin: 0;;}
		#container{height:100%;width:100%;}
		#r-result{width:100%;}
		.top{    
			width: 100%;
		    height: 10%;
		    -webkit-box-shadow: 0 0 0px #999;
		    -moz-box-shadow: 0 0 0px #999;
		    box-shadow: 0 0 0px #999;
		    background-color: #eb2b01;
		    }
		.legend-map{
			position: absolute;
			bottom: 20px;
			right: 30px;
			width: 270px;
		    height: 120px;
		    background-color: rgba(255,255,255,0.9);
		    border: 1px solid #ccc;
		    border-radius: 4px;
		    padding: 10px;
		    padding-top: 20px;
		}    
		.legend-map .type{
			display: block;
		    width: 80px;
		    height: auto;
		    margin: auto;
		    text-align: center;
		    position: relative;
		    padding-bottom: 5px;
		    color: #555;
		    float: left;
		}   
		.legend-map .type .type_icon {
		    display: block;
		    width: 60px;
		    height: 60px;
		    margin: auto;
		    border: 1px solid #ccc;
		    border-radius: 10px;
		}
		.type.active .type_title {
		    color: orangered;
		}
		.type.active .type_icon {
		    border: 1px solid orangered;
		    background-color: #FFF8F8;
		}
		.type .type_title {
		    display: block;
		    height: 40px;
		    line-height: 40px;
		}
		a {
		    text-decoration: none;
		    color: #56678F;
		}
		a:hover{text-decoration:none; cursor:pointer}  
		</style>    
</head>
<body>
	<div class="row top">
		<img src="img/logopng.png" height="100%"/>
	</div>
	<div class="row hgt90">
	  <div class="col-md-9 hgt100" style="position: relative; padding-left: 0;;">
	  	<div id="container"></div>
	  	<div class="legend-map">
			<a class="type active" href="javascript:;">
				<span class="type_icon type_icon_1"></span>
				<span class="type_title">党组织分布</span>
			</a>
			<a onclick="zyfw(this)" class="type active" href="javascript:;">
				<span class="type_icon type_icon_2"></span>
				<span class="type_title">党组织活动</span>
			</a>
			<a onclick="ddbgzs(this)" class="type active" href="javascript:;">
				<span class="type_icon type_icon_5"></span>
				<span class="type_title">志愿者活动</span>
			</a>
		</div>
	  </div>
	  <div class="col-md-2 hgt100">
	  	<input type="button" onclick="showAHideMarker('党支部')" value="党支部"/>
	  	<input type="button" onclick="showAHideMarker('活动')" value="活动"/>
	  	<input type="button" onclick="showAHideMarker('志愿者')" value="志愿者"/>
	  </div>
	</div>
	<div class="sliderbar-container" style="background: white;">
		<div class="sliderbar-title"><i></i> 组织架构</div>
		<div class="sliderbar-body" style="background: white;">
		</div>
	</div>
	<!-- 活动详情 -->
	<div class="modal fade" id="activityModal" tabindex="-1" role="dialog" aria-labelledby="activityModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="activityModalLabel">活动详情</h4>
	      </div>
	      <div class="modal-body">
	        <img src="img/mapicon_1.png" alt="..." class="img-thumbnail">
	        <img src="..." alt="..." class="img-thumbnail">
	        <img src="..." alt="..." class="img-thumbnail">
	        <img src="..." alt="..." class="img-thumbnail">
	      </div>
	    </div>
	  </div>
	</div>
	
</body>
</html>
<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.sliderBar.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=F8GGZGTAevRPL7BwLtTjQvEzdAlpzqTt"></script>
<script src="js/function.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	// 创建地图实例
    var map = new BMap.Map("container", {enableMapClick:false});    
    var iconArr = [
    				new BMap.Icon("img/mapicon_1.png", new BMap.Size(50,50)),
    				new BMap.Icon("img/mapicon_3.png", new BMap.Size(50,50)),
    				new BMap.Icon("img/mapicon_4.png", new BMap.Size(50,50))
    			 ];
	$(function(){
		//初始化 组织部门
		$('.sliderbar-container').sliderBar({
			open : false,           // 默认是否打开，true打开，false关闭
	        top : $(".top").height(),// 距离顶部多高
	        width : 300,           // body内容宽度
	        height : 600,          // body内容高度
	        theme : 'red',         // 主题颜色
	        position : 'left'      // 显示位置，有left和right两种
		});
	   /* var point = new BMap.Point(116.418261, 39.921984);
	    map.centerAndZoom(point, 15);*/
	    map.enableScrollWheelZoom(); 
		var branchNode = getThisPartyBranchInfo();
		console.log(branchNode);
		if(branchNode.states == "success"){
			//创建小狐狸
			var pt = new BMap.Point(branchNode.centerNode.lng, branchNode.centerNode.lat);
			/*var myIcon = iconArr[0];
			var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
			map.addOverlay(marker2);    
			map.centerAndZoom(pt, 15);*/
			addMarker(pt,"党支部",0);
			map.centerAndZoom(pt, 15);
			//党支部
			var partyBranch = branchNode.partyBranch;
			for (var i = 0; i < partyBranch.length; i++) {
				let pt = new BMap.Point(partyBranch[i].lng, partyBranch[i].lat);
				addMarker(pt,"党支部",0);
			}
			//志愿者
			var volunteer = branchNode.volunteer;
			for (var i = 0; i < volunteer.length; i++) {
				let pt = new BMap.Point(volunteer[i].lng, volunteer[i].lat);
				addMarker(pt,"志愿者",2);
			}
			//活动
			var activity = branchNode.activity;
			for (var i = 0; i < activity.length; i++) {
				let pt = new BMap.Point(activity[i].lng, activity[i].lat);
				addMarker(pt,"活动",1);
			}
		}
		
		
	});
</script>